<template>
  <div>
    <div class="ZhiJing">
      <div class="ZhiJing_C">
        <img src="http://ykt.eduyun.cn/r/cms/ykt/default/img0316/shou.jpg" />
      </div>
    </div>
    <div class="KuaiJie">
      <div class="KuaiJie_L">
        <div class="RuKou_L">
          <div class="math">
            <div class="img">
              <img src="http://ykt.eduyun.cn/r/cms/ykt/default/img0316/kuaijie.png" />
              <p class="text">
                数
                <br />学
                <br />练
                <br />兵
                <br />网
              </p>
            </div>
          </div>
          <table class="wz">
            <tr>
              <th>数学练兵网网址：</th>
              <th>http://sx.haohaogame.com/ks</th>
              <th rowspan="5" class="ts">* 温馨提示：控制上网时间，保护视力、锻炼身体！</th>
            </tr>
            <tr>
              <td>备用网址:</td>
              <td>http://wsh.meibu.com:123/ks</td>
            </tr>
            <tr>
              <td></td>
              <td>http://wsh.linkpc.net:123/ks</td>
            </tr>
            <tr>
              <td></td>
              <td>http://wshh.vicp.cc:123/ks</td>
            </tr>
            <tr>
              <td></td>
              <td>http://okway.gnway.cc:123/ks</td>
            </tr>
          </table>
        </div>
        <div class="RuKou_R">
          <img src="http://sx.haohaogame.com/ks/img/wsh.gif" />
          <span>关注学习建议</span>
        </div>
      </div>
      <div class="KuaiJie_R">
        <p>作者：吴守海</p>
        <p>
          <img src="http://sx.haohaogame.com/ks/img/qq.gif" alt />
        </p>
        <p>QQ ：80404108</p>
        <p>手机18122099234</p>
        <router-link to tag="div" class="login">
          <div class="null"></div>
          <p>点击此处登陆账号</p>
        </router-link>
      </div>
    </div>
    <div class="TuBiao">
      <p class="xz">
        请选择
        <span>现在</span>的身份
      </p>
      <div class="tb">
        <div class="item" v-for="(item,index) in list" :key="index" >
          <div class="class">{{item.class}}</div>
          <div class="link" @click="goClass(item)">
            <div class="img">
              <img
                src="https://tse4-mm.cn.bing.net/th/id/OIP.f1rzkuIybmH5GaChkjux6QAAAA?w=181&h=181&c=7&o=5&pid=1.7"
                alt
              />
            </div>
            <div class="text">{{item.st}}</div>
          </div>

          <div class="link">
            <div class="img">
              <img
                src="https://tse2-mm.cn.bing.net/th/id/OIP.UtCa3O-2IdJmnwozO0lZegAAAA?w=181&h=181&c=7&o=5&pid=1.7"
                alt
              />
            </div>
            <div class="text">{{item.te}}</div>
          </div>
        </div>
      </div>
      <!-- <div class="tb-t">
            <div>
                <a href="/ykt/epidemicpk/index.html" target="_blank">
                    <img src="https://tse4-mm.cn.bing.net/th/id/OIP.f1rzkuIybmH5GaChkjux6QAAAA?w=181&h=181&c=7&o=5&pid=1.7" />
                </a>
                <p>
                    <a href="/ykt/epidemicpk/index.html" target="_blank">防疫教育</a>
                </p>
            </div>
            <div>
                <a href="/ykt/rede/index.html" target="_blank">
                    <img style="padding-left: 14px;" src="http://ykt.eduyun.cn/r/cms/ykt/default/img0316/shoupic2.jpg" />
                </a>
                <p>
                    <a href="/ykt/rede/index.html" target="_blank">品德教育</a>
                </p>
            </div>
            <div>
                <a href="http://tongbu.eduyun.cn/tbkt/index.html" target="_blank">
                    <img src="http://ykt.eduyun.cn/r/cms/ykt/default/img0316/shoupic3.jpg" />
                </a>
                <p>
                    <a href="http://tongbu.eduyun.cn/tbkt/index.html" target="_blank">课程学习</a>
                </p>
            </div>
            <div>
                <a href="/ykt/thematiceaq/index.html" target="_blank">
                    <img src="http://ykt.eduyun.cn/r/cms/ykt/default/img0316/shoupic4.jpg" />
                </a>
                <p>
                    <a href="/ykt/thematiceaq/index.html" target="_blank">生命安全教育</a>
                </p>
            </div>
            <div>
                <a href="/ykt/yktxljkjy/index.html" target="_blank">
                    <img src="http://ykt.eduyun.cn/r/cms/ykt/default/img0316/shoupic5.jpg" />
                </a>
                <p>
                    <a href="/ykt/yktxljkjy/index.html" target="_blank">心理健康教育</a>
                </p>
            </div>
        </div>
        <div class="tb-b">
            <div>
                <a href="/ykt/thematicejt/index.html" target="_blank">
                    <img src="https://tse2-mm.cn.bing.net/th/id/OIP.UtCa3O-2IdJmnwozO0lZegAAAA?w=181&h=181&c=7&o=5&pid=1.7" />
                </a>
                <p>
                    <a href="/ykt/thematicejt/index.html" target="_blank">家庭教育</a>
                </p>
            </div>
            <div>
                <a href="/ykt/yktjdyd/index.html" target="_blank">
                    <img src="https://tse2-mm.cn.bing.net/th/id/OIP.UtCa3O-2IdJmnwozO0lZegAAAA?w=181&h=181&c=7&o=5&pid=1.7" />
                </a>
                <p>
                    <a href="/ykt/yktjdyd/index.html" target="_blank">经典阅读</a>
                </p>
            </div>
            <div>
                <a href="/ykt/yktyxjd/index.html" target="_blank">
                    <img src="http://ykt.eduyun.cn/r/cms/ykt/default/img0316/shoupic8.jpg" />
                </a>
                <p>
                    <a href="/ykt/yktyxjd/index.html" target="_blank">研学教育</a>
                </p>
            </div>
            <div>
                <a href="/ykt/filmae/index.html" target="_blank">
                    <img src="http://ykt.eduyun.cn/r/cms/ykt/default/img0316/shoupic9.jpg" />
                </a>
                <p>
                    <a href="/ykt/filmae/index.html" target="_blank">影视教育</a>
                </p>
            </div>
            <div>
                <a href="http://ebook.eduyun.cn/yktdzjc/index.html" target="_blank">
                    <img src="http://ykt.eduyun.cn/r/cms/ykt/default/img0316/shoupic10.jpg" />
                </a>
                <p class="DianCai">
                    <a href="http://ebook.eduyun.cn/yktdzjc/index.html" target="_blank">电子教材</a>
                </p>
            </div>
      </div>-->
    </div>
    <div class="PingJie">
      <h2 class="PingJie_bj">
        <img src="http://ykt.eduyun.cn/r/cms/ykt/default/img0316/jieshao.png" />
      </h2>
      <p>&nbsp;&nbsp;&nbsp;&nbsp;数学练兵网，是吴守海老师独自开发的辅助学习网站，意在提高计算的速度和正确率，巩固基础知识，训练思维技能。</p>
      <p>&nbsp;&nbsp;&nbsp;&nbsp;为此，吴老师个人出资购买了建设网站的硬件设备和软件系统，牺牲了大量休息时间编写程序代码、扩充题库。</p>
      <p>&nbsp;&nbsp;&nbsp;&nbsp;因精力有限，疏漏在所难免，希望同学们在发现问题后尽快和吴老师联系，以便能及时修正。谢谢</p>
      <p>&nbsp;&nbsp;&nbsp;&nbsp;应学生和家长要求，平台增加了中国教育电视台CETV4"同上一堂课"播出的小学、初中、普通高中课程。可通过平台收看电视直播，也可在课程学习栏目点播回看。</p>
      <p>&nbsp;&nbsp;&nbsp;&nbsp;平台所有学习资源均免费使用，不得用于商业行为。</p>
    </div>
    <div class="footer-zt">
      <p>网站运维:中央电化教育馆&nbsp;&nbsp;&nbsp;客服电话:4008980910&nbsp;&nbsp;（工作日 8:30-17:00）</p>
      <p>技术支持：中国电信、中国移动、中国联通、阿里云、百度智能云、网宿科技、华为技术有限公司</p>
      <p>
        <a href="http://www.beian.miit.gov.cn/" target="_blank">京ICP备09059518号-3</a>
      </p>
    </div>
  </div>
</template>

<script>
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {
      list: [
        {
          id: 1,
          class: "一年级",
          st: "学生",
          te: "教师",
          to:'/grade'
        },
        {
          id: 1,
          class: "二年级",
          st: "学生",
          te: "教师",
           to:'/grade2'
        },
        {
          id: 1,
          class: "三年级",
          st: "学生",
          te: "教师",
           to:'/grade3'
        },
        {
          id: 1,
          class: "四年级",
          st: "学生",
          te: "教师",
           to:'/grade4'
        },
        {
          id: 1,
          class: "五年级",
          st: "学生",
          te: "教师"
        },
        {
          id: 1,
          class: "六年级",
          st: "学生",
          te: "教师"
        }
      ]
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    goClass(item){
      console.log(item.to)
      this.$router.push({path:item.to,query:{name:item.class}})
    }
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {}
};
</script>
<style lang='scss' scoped>
@charset "utf-8";
body {
  padding: 0;
  margin: 0px;
  font-family: "宋体";
  font-size: 12px;
}
h2,
li,
ul,
img,
p,
h1,
em,
strong,
input,
select,
option,
dl,
dt,
b,
i,
br,
cite,
font,
h4,
dd,
span,
h6,
h3,
ol,
h5 {
  padding: 0px;
  margin: 0px;
}
input,
select,
textarea {
  outline: 0;
}
img {
  border: 0px;
}
ul,
ol,
dl,
dt {
  list-style: none;
}
a {
  text-decoration: none;
  color: #444;
  cursor: pointer;
}
b {
  font-size: 20px;
  color: #0153a9;
}
strong {
  font-size: 14px;
}
.clear {
  clear: both;
}
.f-l {
  float: left;
}
.f-r {
  float: right;
}

.footer1 {
  width: 100%;
  background: #018dd0;
}
.footer {
  background: #018dd0;
  padding: 20px 0 20px;
  width: 1102px;
  margin: 0 auto;
  p {
    text-align: center;
    color: #fff;
    line-height: 24px;
  }
}

/* 八大专题公共头底 */
.YunTou {
  background: #ebebeb;
  height: 49px;
  width: 100%;
  position: fixed;
  z-index: 1000;
}
.YunTou_C h1 {
  float: left;
  width: 214px;
  margin-right: 76px;
}
.YunTou_C ul {
  float: left;
  li {
    float: left;
    line-height: 49px;
    padding-right: 21px;
    a {
      float: left;
      line-height: 49px;
      font-size: 12px;
      color: #000000;
    }
    a:hover {
      text-decoration: underline;
    }
  }
}

/* 专题底部 */
.footer-zt {
  padding: 20px 0 20px;
  font-family: "宋体";
  font-size: 12px;
  margin: 0 auto;
  border-top: 1px solid #e3e3e3;
  p {
    text-align: center;
    color: #676767;
    line-height: 24px;
    a {
      color: #676767;
    }
  }
}

/* 首页 */
.ZhiJing {
  height: 189px;
  background: url("http://ykt.eduyun.cn/r/cms/ykt/default/img0316/shou_bj.jpg")
    repeat-x;
  .ZhiJing_C {
    margin: 0 auto;
    width: 1080px;
  }
}

.KuaiJie {
  height: 136px;
  width: 1080px;
  margin: 0 auto;
  margin-top: 45px;
  .KuaiJie_L {
    float: left;
    width: 838px;
    .RuKou_L {
      border-top: 1px solid #dbf2ff;
      border-bottom: 1px solid #dbf2ff;
      background: #f1faff;
      float: left;
      width: 735px;
      height: 134px;
      position: relative;
      border-radius: 10px 0 0 10px;
      padding-left: 105px;
      .wz {
        font-size: 14px;
        width: 600px;
        th {
          padding-top: 5px;
          font-size: 16px;
        }
        .ts {
          font-size: 14px;
          color: #0a854b;
          font-family: "微软雅黑";
          font-style: italic;
          padding-right: 10px;
          width: 100px;
        }
      }
      .math {
        position: absolute;
        top: -5px;
        left: 0;
        .img {
          position: relative;
          .text {
            background-color: #ee930f;
            color: #fff;
            position: absolute;
            top: 8px;
            font-weight: bold;
            font-size: 17px;
            left: 22px;
            width: 40px;
          }
        }
      }
    }
    .RuKou_R {
      width: 102px;
      height: 136px;
      float: right;
      border-radius: 0 10px 10px 0;
      background: #68a1ce;
      img {
        margin: 0 auto;
        display: block;
        margin-top: 1px;
        border-top-right-radius: 10px;
      }
      span {
        display: block;
        text-align: center;
        font-size: 12px;
        color: #ffffff;
        padding-top: 10px;
      }
    }
  }
  .KuaiJie_R {
    float: right;
    width: 211px;
    height: 130px;
    border: 1px solid #c5a139;
    background: #e5bf50;
    border-radius: 10px;
    position: relative;
    padding-top: 4px;
    p {
      text-align: center;
      font-size: 14px;
      font-family: "微软雅黑";
      color: #ffffff;
      line-height: 22px;
      font-weight: bold;
    }
    .login {
      background-image: url("http://ykt.eduyun.cn/r/cms/ykt/default/img0316/dianjizhibo.png");
      height: 34px;
      color: #fff;
      display: flex;
      cursor: pointer;
      border-radius: 0 0 10px 10px;
      .null {
        width: 50px;
      }
      p {
        font-size: 18px;
        padding-top: 5px;
        flex-grow: 1;
        text-align: left;
        background-color: #ee930f;
        border-radius: 20px;
      }
    }
    .login:hover {
      color: #000;
    }
  }
}

.TuBiao {
  border: 1px solid #dbf2ff;
  text-align: center;
  background: #f1faff;
  border-radius: 10px;
  height: 353px;
  width: 1080px;
  margin: 0 auto;
  overflow: hidden;
  margin-top: 37px;
  .tb {
    display: flex;
    justify-content: space-around;
    .item {
      padding: 10px 0;
      .class {
        color: #22a1ca;
        font-family: "Times New Roman", Georgia, Serif;
        text-shadow: 2px 2px #bbb;
        padding: 10px 0 0;
        font-size: 20px;
        font-weight: bold;
      }
      .link {
        padding: 10px 20px 0;
        margin-top: 10px;
        border-radius: 15px;
        font-size: 18px;
        color: #68a1ce;
        cursor: pointer;
        .img {
          width: 72px;
          img {
            width: 100%;
            height: 100%;
            border: 1px solid #68a1ce;
            border-radius: 50%;
          }
        }
        .text {
          padding: 5px 0 1px;
        }
      }
      .link:hover {
        color: #fff;
        background-color: #68a1ce;
        .img {
          img {
            -webkit-transform: scale(0, 4);
            -ms-transform: scale(1.1);
            transform: scale(1.1);
            -webkit-transition: all 0.4s;
            -o-transition: all 0.4s;
            transition: all 0.4s;
          }
        }
      }
    }
  }
  .xz {
    padding-top: 10px;
    font-size: 14px;
    span {
      color: red;
    }
  }
  // .tb-t,.tb-b{
  // margin:40px auto 0;
  // // float:left;
  // display: flex;
  // justify-content: space-around;
  // text-align: center;
  // div{
  //     width: 120px;
  //     a{
  //         img{
  //             width: 94px;
  //             height:80px;
  //             transition: all 0.6s;
  //         }
  //         img:hover{
  //             -webkit-transform: scale(0,4);
  //             -ms-transform: scale(1.2);
  //             transform: scale(1.2);
  //             -webkit-transition: all 0.4s;
  //             -o-transition: all 0.4s;
  //             transition: all 0.4s;
  //         }
  //     }
  //     p{
  //         text-align:center;
  //         a{
  //             font-size:18px;
  //             font-family:"微软雅黑";
  //             color:#000;
  //             text-decoration: none;
  //             display: block;
  //             line-height: 35px;
  //         }
  //     }
  // }

  // }
}

.PingJie {
  width: 1080px;
  border: 1px solid #dbf2ff;
  background: #f1faff;
  height: 280px;
  border-radius: 10px;
  margin: 0 auto 45px;
  margin-top: 37px;
  position: relative;
  padding: 15px 40px 0 145px;
  .PingJie_bj {
    position: absolute;
    top: -5px;
    left: 13px;
  }
  p {
    font-size: 17px;
    line-height: 28px;
    font-family: "微软雅黑";
    color: #000;
    padding-top: 8px;
  }
}
</style>